<template>
  <div class="full">
    <el-scrollbar>
      <div class="dlText-120 list-b-12 p-12">
        <CellBox title="基础信息">
          <template #btn v-if="isEdit">
            <el-link type="primary" @click="openPup(pupBase)">编辑</el-link>
          </template>
          <FlexBox :list="3" :margin="8">
            <dl>
              <dt>客户编号</dt>
              <dd>{{ data.customerNumber || '--' }}</dd>
            </dl>
            <dl>
              <dt>结算方式</dt>
              <dd>{{ data.settlementWayName || '--' }}</dd>
            </dl>
            <dl>
              <dt>销售代表</dt>
              <dd>{{ data.belongToSalesmanName || '--' }}</dd>
            </dl>
            <dl>
              <dt>是否含税</dt>
              <dd>{{ data.isIncludingTax === 1 ? '含税' : '未税' }}</dd>
            </dl>
            <dl>
              <dt>税率</dt>
              <dd>{{ data.taxRate || '--' }}</dd>
            </dl>
            <dl>
              <dt>客户电话</dt>
              <dd>{{ data.telephoneNo || '--' }}</dd>
            </dl>
            <dl>
              <dt>客户地址</dt>
              <dd>{{ data.customerAddress || '--' }}</dd>
            </dl>
            <dl class="wAuto">
              <dt>备注</dt>
              <dd>{{ data.customerRemark || '--' }}</dd>
            </dl>
          </FlexBox>
        </CellBox>
        <el-divider />
        <CellBox title="联系人信息">
          <template #btn v-if="isEdit">
            <el-link type="primary" @click="openPup(pupCommander)">编辑</el-link>
          </template>
          <FlexBox :list="3" :margin="8">
            <dl>
              <dt>联系人</dt>
              <dd>{{ data.contactPerson || '--' }}</dd>
            </dl>
            <dl>
              <dt>性别</dt>
              <dd>{{ data.contactManSexName || '--' }}</dd>
            </dl>
            <dl>
              <dt>联系手机</dt>
              <dd>{{ data.contactMobile || '--' }}</dd>
            </dl>
            <dl>
              <dt>微信</dt>
              <dd>{{ data.contactWx || '--' }}</dd>
            </dl>
            <dl>
              <dt>QQ</dt>
              <dd>{{ data.contactQQ || '--' }}</dd>
            </dl>
            <dl>
              <dt>邮箱</dt>
              <dd>{{ data.contactEmail || '--' }}</dd>
            </dl>
          </FlexBox>
        </CellBox>
        <el-divider />
        <CellBox title="开票信息">
          <template #btn v-if="isEdit">
            <el-link type="primary" @click="openPup(pupInvoice)">编辑</el-link>
          </template>
          <FlexBox :list="3" :margin="8">
            <dl>
              <dt>发票类型</dt>
              <dd>{{ data.invoiceTypeName || '--' }}</dd>
            </dl>
            <dl>
              <dt>开票抬头</dt>
              <dd>{{ data.invoiceTitle || '--' }}</dd>
            </dl>
            <dl>
              <dt>纳税人识别号</dt>
              <dd>{{ data.taxpayerIdentifyCode || '--' }}</dd>
            </dl>
            <dl>
              <dt>单位电话</dt>
              <dd>{{ data.makeInvoiceTelephone || '--' }}</dd>
            </dl>
            <dl>
              <dt>单位地址</dt>
              <dd>{{ data.makeInvoiceAddress || '--' }}</dd>
            </dl>
            <dl>
              <dt>开户银行</dt>
              <dd>{{ data.openAccountBank || '--' }}</dd>
            </dl>
            <dl>
              <dt>银行账号</dt>
              <dd>{{ data.bankCardNo || '--' }}</dd>
            </dl>
          </FlexBox>
        </CellBox>
      </div>
    </el-scrollbar>
  </div>
  <ElPupFormBox :pup="pupBase">
    <template #default="{ form }">
      <ElFormItemBox label="客户名称" :prop="`customerName`" isRules>
        <ElInputBox :data="form" dataName="customerName" />
      </ElFormItemBox>
      <ElFormItemBox label="结算方式" :prop="`settlementWay`" isRules>
        <ElRadioBox :data="form" dataName="settlementWay" :options="options.settlementWay" />
      </ElFormItemBox>
      <ElFormItemBox label="快递费用归属" :prop="`courierFeeType`">
        <ElRadioBox :data="form" dataName="courierFeeType" :options="proxy.$optionsArr.courierFeeType" />
      </ElFormItemBox>
      <ElFormItemBox label="是否含税" :prop="`isIncludingTax`" isRules>
        <ElRadioBox :data="form" dataName="isIncludingTax" :options="options.isIncludingTax" />
      </ElFormItemBox>
      <ElFormItemBox label="税率" :prop="`taxRate`" isRules>
        <ElNumberBox :data="form" dataName="taxRate" :max="1" :min="0" />
      </ElFormItemBox>
      <ElFormItemBox label="销售代表" :prop="`belongToSalesman`" isRules>
        <ElSelectBox :data="form" dataName="belongToSalesman" :options="options.personnel" />
      </ElFormItemBox>
      <ElFormItemBox label="客户电话" :prop="`telephoneNo`">
        <ElInputBox :data="form" dataName="telephoneNo" />
      </ElFormItemBox>
      <ElFormItemBox label="客户地址" :prop="`customerAddress`">
        <AddressBox :data="form" :dataName="{
          province: 'province',
          city: 'city',
          country: 'country',
          address: 'customerAddress',
        }" :options="options.treeArea" />
      </ElFormItemBox>
      <ElFormItemBox label="备注" :prop="`customerRemark`">
        <ElInputBox :data="form" dataName="customerRemark" type="textarea" />
      </ElFormItemBox>
    </template>
  </ElPupFormBox>
  <ElPupFormBox :pup="pupCommander">
    <template #default="{ form }">
      <ElFormItemBox label="名称" :prop="`contactPerson`" isRules>
        <ElInputBox :data="form" dataName="contactPerson" />
      </ElFormItemBox>
      <ElFormItemBox label="手机" :prop="`contactMobile`" isRules>
        <ElInputBox :data="form" dataName="contactMobile" />
      </ElFormItemBox>
      <ElFormItemBox label="性别" :prop="`contactManSex`" isRules>
        <ElRadioBox :data="form" dataName="contactManSex" :options="proxy.$optionsArr.sex" />
      </ElFormItemBox>
      <ElFormItemBox label="QQ" :prop="`contactQQ`">
        <ElInputBox :data="form" dataName="contactQQ" />
      </ElFormItemBox>
      <ElFormItemBox label="微信" :prop="`contactWx`">
        <ElInputBox :data="form" dataName="contactWx" />
      </ElFormItemBox>
      <ElFormItemBox label="邮件" :prop="`contactEmail`">
        <ElInputBox :data="form" dataName="contactEmail" />
      </ElFormItemBox>
    </template>
  </ElPupFormBox>
  <ElPupFormBox :pup="pupInvoice">
    <template #default="{ form }">
      <ElFormItemBox label="发票类型" :prop="`invoiceType`" isRules>
        <ElRadioBox :data="form" dataName="invoiceType" :options="proxy.$optionsArr.invoiceType" />
      </ElFormItemBox>
      <ElFormItemBox label="发票抬头" :prop="`invoiceTitle`" isRules>
        <ElInputBox :data="form" dataName="invoiceTitle" />
      </ElFormItemBox>
      <ElFormItemBox label="纳税人识别码" :prop="`taxpayerIdentifyCode`" isRules>
        <ElInputBox :data="form" dataName="taxpayerIdentifyCode" />
      </ElFormItemBox>
      <ElFormItemBox label="单位地址" :prop="`makeInvoiceAddress`" :isRules="form.invoiceType === 2">
        <ElInputBox :data="form" dataName="makeInvoiceAddress" />
      </ElFormItemBox>
      <ElFormItemBox label="单位电话" :prop="`makeInvoiceTelephone`" :isRules="form.invoiceType === 2">
        <ElInputBox :data="form" dataName="makeInvoiceTelephone" />
      </ElFormItemBox>
      <ElFormItemBox label="开户银行" :prop="`openAccountBank`" :isRules="form.invoiceType === 2">
        <ElInputBox :data="form" dataName="openAccountBank" />
      </ElFormItemBox>
      <ElFormItemBox label="银行卡号" :prop="`bankCardNo`" :isRules="form.invoiceType === 2">
        <ElInputBox :data="form" dataName="bankCardNo" />
      </ElFormItemBox>
    </template>
  </ElPupFormBox>
</template>
<script setup lang="ts">
import '../pageCss.scss'; // 引入样式
const { proxy } = getCurrentInstance() as any;
const props = withDefaults(
  defineProps<{
    data?: any;//数据源
    customerCode?: string;//客户code
    isEdit?: boolean;//是否編輯
    options?: any;//数据组
    imageViewer?: any;//预览图片
  }>(),
  {
  },
);
const pupBase = reactive({
  state: false,
  typeName: 0,
  title: `基础信息`,
  width: 600,
  height: 'auto',
  form: {
    taxRate: 0.13, // 税率
    courierFeeType: 0, // 快递费用归属，0-客户承担；1-公司承担；2-各自一半，默认0
    isIncludingTax: 0, // 是否含税,0-未税；1-含税，默认0
    customerName: "", // 客户名字
    belongToSalesman: "", // 客户归属销售人员（销售代表）
    contactPerson: "", // 联系人姓名
    telephoneNo: "", // 联系电话
    province: "", // 所在省代码
    city: "", // 所在市代码
    country: "", // 所在县代码
    customerAddress: "", // 客户地址
    customerRemark: "", // 客户备注
    settlementWay: 0 // 结算方式：1日结；2月结
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        proxy.$api.OrderBusniess.UpdateCustomerBaseData(pup.form)
          .then((res: any) => {
            saveBtn(pup)
          }).catch(() => {
            pup.loading = false
          })

      }
    }
  ]
});
const pupCommander = reactive({
  state: false,
  typeName: 0,
  title: `联系人信息`,
  width: 600,
  height: 'auto',
  form: {
    customerID: 0, // 客户主键ID
    modifyBy: "", // 修改人员
    contactPerson: "", // 联系人姓名
    contactManSex: 1, // 联系人性别：1男；2女
    contactBirthday: "", // 联系人出生日期，格式：yyyy-MM-dd
    contactPicture: "", // 联系人照片
    contactMobile: "", // 联系电话
    contactQQ: "", // 联系人QQ号码
    contactWx: "", // 联系人微信号
    contactEmail: "", // 联系人Email地址
    contactAddress: "" // 联系人地址
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        proxy.$api.OrderBusniess.UpdateCustomerContactData(pup.form)
          .then((res: any) => {
            saveBtn(pup)
          }).catch(() => {
            pup.loading = false
          })

      }
    }
  ]
});
const pupInvoice = reactive({
  state: false,
  typeName: 0,
  title: `发票信息`,
  width: 600,
  height: 'auto',
  form: {
    customerID: 0, // 客户主键ID
    modifyBy: "", // 修改人员
    invoiceType: 1, // 开票类型：1普通发票；2增值税专票
    invoiceTitle: "", // 开票抬头（单位名称）
    taxpayerIdentifyCode: "", // 纳税人识别码
    makeInvoiceAddress: "", // 开票地址（单位地址）
    makeInvoiceTelephone: "", // 开票电话
    openAccountBank: "", // 开户银行
    bankCardNo: "" // 银行卡号
  },
  btns: [
    {
      title: '保存',
      type: 'primary',
      click: (pup: any) => {
        proxy.$api.OrderBusniess.UpdateCustomerInvoiceData(pup.form)
          .then((res: any) => {
            saveBtn(pup)
          }).catch(() => {
            pup.loading = false
          })

      }
    }
  ]
});
const openPup = (pup: any) => {
  proxy.$openPup(pup, 2)
  const _data = props.data
  pup.form = {
    ..._data
  }
}
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'saveBtn'): void;
}>();
const saveBtn = (pup: any) => {

  proxy.$message('保存成功')
  pup.state = false
  emit('saveBtn');
};
onMounted(() => {
});
</script>
